<%@ page language="java" import="java.util.*"
	contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html class="x-admin-sm">
<head>
<meta charset="UTF-8">
<title>业主车辆信息</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/front/css/font.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/front/css/index.css">
<script
	src="${pageContext.request.contextPath}/front/lib/layui/layui.js"
	charset="utf-8"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/front/js/index.js"></script>

</head>
<body>
	<div class="x-nav">
		<span class="layui-breadcrumb"> <a href="">首页</a> <a href="">演示</a>
			<a> <cite>导航元素</cite></a>
		</span> <a class="layui-btn layui-btn-small"
			style="line-height: 1.6em; margin-top: 3px; float: right"
			onclick="location.reload()" title="刷新"> <i
			class="layui-icon layui-icon-refresh" style="line-height: 30px"></i></a>
	</div>
	<div class="layui-fluid">
		<div class="layui-row layui-col-space15">
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-body ">
					</div>
					<div class="layui-card-body layui-table-body layui-table-main">
						<table class="layui-table layui-form" id="table-carlist">
							<thead>
								<tr>
									<th><input type="checkbox" lay-filter="checkall" name=""
										lay-skin="primary"></th>
									<th>车辆ID</th>
									<th>车主姓名</th>
									<th>车牌号</th>
									<th>车主电话</th>
									<th>房号</th>
								</tr>
							</thead>
							<tbody>

								<tr>
									<td><input type="checkbox" lay-filter="checkall" name=""
										lay-skin="primary"></td>
									<td>1</td>
									<td><img src="./images/tx.jpg" width="50" height="30"></td>
									<td>小芳</td>
									<td>XAT0001</td>
									<td>15060848575</td>
									<td>D08-1901</td>
									
								</tr>
							</tbody>
						</table>
					</div>

					<div class="layui-card-body ">
						<div class="page">
							<div class="layui-table-page">
								<div id="layui-table-page1">
									<div class="layui-box layui-laypage layui-laypage-default"
										id="layui-laypage-2"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<!-- 引入JQuery -->
<script type="text/javascript" src="${pageContext.request.contextPath}/front/js/jquery-3.6.0.js"></script>

<script>
		console.log("${sessionScope.ownerSession.ownerPhoneNumber}");
		/*定义一个全篇变量初始页码，默认记录数*/
		let pageNum = 1;
		let pageSize = 2;
		
		/**页面加载前直接查询记录**/
		car_search_page();
		/**车辆查询方法**/
		function car_search_page() {
			//对每页/条数变量进行校验
			pageSize = $("#layui-laypage-2 select").val();
			//如果不存在则设置初始值
			if (pageSize == null) {
				pageSize = 2;
			}
			//使用AJAX发起异步请求
			
			$.ajax({
				async : true,
				type : "get",
				url : "${pageContext.request.contextPath}/CarServlet",
				data : {
					op : "findByPhone",
					carPhone : "${sessionScope.ownerSession.ownerPhoneNumber}",
					pageNum : pageNum,
					pageSize : pageSize,
				},
				contentType : "application/x-www-form-urlencoded",
				dataType : "json",
				success : function(result, status, xhr) {
					//1.渲染
					let content = "";
					//2.判断是否存在数据
					if (result.data != null) {
						
						//开始迭代数据
						$.each(result.data,function(i, obj) {
							
								content += "<tr>"
										+ "<td><input type=\"checkbox\" lay-filter=\"checkall\" name=\"\" lay-skin=\"primary\"></td>"
										+ "<td>"
										+ obj.carId
										+ "</td>"
										+ "<td>"
										+ obj.carUserName
										+ "</td>"
										+ "<td>"
										+ obj.carCard
										+ "</td>"
										+ "<td>"
										+ obj.carPhone
										+ "</td>"
										+ "<td>"
										+ obj.owner.roomNo
										+ "</td>"
										+ "</tr>";
							});
						//更新指定表格
						$("#table-carlist tbody").html(content);
					} else {
						$("#table-carlist tbody").empty();
					}
						//渲染分页栏目
						let pageContent = "";
						if (result.data != null) {

							//判断是不是第一页
							if (result.data.pageNum == 1) {
								pageContent = "<a href=\"javascript:;\" class=\"layui-laypage-prev layui-disabled\" data-page=\"0\"><i class=\"layui-icon\">上一页</i></a>";
							} else {
								pageContent = "<a href=\"javascript:;\" class=\"layui-laypage-prev\" data-page=\""
										+ (result.data.pageNum - 1)
										+ "\"><i class=\"layui-icon\">上一页</i></a>";
							}
							for (let i = 1; i <= result.data.pages; i++) {
								//判断当前页码
								if (i == result.data.pageNum) {
									pageContent += "<span class=\"layui-laypage-curr\" data-page=\""+i+"\"><em class=\"layui-laypage-em\"></em><em>"
											+ i + "</em></span>";
								} else {
									pageContent += "<a href=\"javascript:;\" data-page=\""+i+"\">"
											+ i + "</a>";
								}

							}

							//判断是否是最后一页
							if (result.data.pageNum == result.data.pages) {
								pageContent += "<a href=\"javascript:;\" class=\"layui-laypage-next layui-disabled\" data-page=\""
										+ (result.data.pageNum + 1)
										+ "\"><i class=\"layui-icon\">下一页</i></a>";
							} else {
								pageContent += "<a href=\"javascript:;\" class=\"layui-laypage-next\" data-page=\""
										+ (result.data.pageNum + 1)
										+ "\"><i class=\"layui-icon\">下一页</i></a>"
							}

							pageContent += "<span class=\"layui-laypage-limits\">"
									+ "<select lay-ignore=\"\">"
									+ "<option value=\"2\" >2条/页</option>"
									+ "<option value=\"5\">5 条/页</option>"
									+ "<option value=\"10\">10 条/页</option>"
									+ "</select></span>";
							$("#layui-laypage-2").html(pageContent);

							$("#layui-laypage-2 select option")
									.each(
											function() {
												if ($(this).val() == result.data.pageSize) {
													$(this).prop("selected",
															"selected");
												}
											});
						} else {
							$("#layui-laypage-2").html(pageContent);
						}
					},
					error : function() {
						alert("异步请求失败");
					}
				});

	}
	/* 上一页 下一页 页码*/
	$("body").on("click", "#layui-laypage-2 a", function() {
		//获取超链接的自定义属性data-page上的页码，对pageNum充值赋值
		pageNum = $(this).data("page");
		//调用查询方法
		car_search_page();

	});
	/* 确定 页码*/
	$("body").on("click", "#layui-laypage-2 button", function() {
		//获取输入框的页码
		let inputPageNum = $("#layui-laypage-2 input").val();
		//获取最大页数
		let maxPage = $("#layui-laypage-2 input").prop("max");
		if (inputPageNum >= 1 && inputPageNum <= maxPage) {
			//为pageNum设置
			pageNum = inputPageNum;
			//调用查询方法
			car_search_page();
		} else {
			//使用layui的layer弹出错误信息
			layui.use('layer', function() {
				layer.msg("输入页码只能在1-" + maxPage + "之间", {
					icon : 2,
					time : 3000
				});

			});
		}
	});
	/* 条数下拉框*/
	$("body").on("change", "#layui-laypage-2 select", function() {
		//设置页码
		pageNum = 1;
		//调用查询方法
		car_search_page();
	});

	
</script>













<script>
	/*页面已进入就发起的请求*/
	/* 商品-查询*/

	/*商品-删除*/
	function goods_del(goodsId) {
		layer.confirm("确认要删除吗？", {
			icon : 3,
			title : "提示信息"
		}, function(index) {
			//异步请求后端删除接口
			$.getJSON("${pageContext.request.contextPath}/GoodsServlet", {
				op : "delete",
				goodsId : goodsId
			}, function(result, status, xhr) {
				if (result.data == true) {//删除成功
					layui.use('layer', function() {
						layer.msg(result.message, {
							icon : 1,
							time : 3000
						});
					});
					//删除成功之后再次调用查询方法
					goods_search();
				} else {//删除失败
					layui.use('layer', function() {
						layer.msg(result.message, {
							icon : 2,
							time : 3000
						});
					});
				}
			});
		});
	}
</script>
<script>
	/*商品-删除*///同步请求
	/**
	 function goods_del(goodsId){
	 layer.confirm('确认要删除吗？', {
	 icon : 3,
	 title : '提示信息'
	 }, function(index) {
	 //请求后端控制器删除数据
	 location.href="${pageContext.request.contextPath}/GoodsServlet?op=delete&goodsId="+goodsId;
	 });
	 }**/
	/**
	 //读取相应消息
	 let message="${requestScope.msg}";
	 if(message!=""){
	 //使用layui的layer弹出错误信息
	 layui.use('layer',function(){
	 layer.mas(message,{icon:1,time:3000});
	 });
	 }**/
</script>
<script>
	layui.use([ 'laydate', 'form' ], function() {
		var laydate = layui.laydate;
		var form = layui.form;

		// 监听全选
		form.on('checkbox(checkall)', function(data) {

			if (data.elem.checked) {
				$('tbody input').prop('checked', true);
			} else {
				$('tbody input').prop('checked', false);
			}
			form.render('checkbox');
		});

		//执行一个laydate实例
		laydate.render({
			elem : '#start' //指定元素
		});

		//执行一个laydate实例
		laydate.render({
			elem : '#end' //指定元素
		});

	});

	/*用户-添加*/
	function member_add(title, url, id, w, h) {

		xadmin.open(title, url, id, w, h);
	}

	/*用户-停用*/
	function member_stop(obj, id) {
		layer.confirm('确认要停用吗？', {
			icon : 3,
			title : '提示信息'
		}, function(index) {

			if ($(obj).attr('title') == '启用') {

				//发异步把用户状态进行更改
				$(obj).attr('title', '停用')
				$(obj).find('i').html('&#xe62f;');

				$(obj).parents("tr").find(".td-status").find('span').addClass(
						'layui-btn-disabled').html('已停用');
				layer.msg('已停用!', {
					icon : 5,
					time : 1000
				});

			} else {
				$(obj).attr('title', '启用')
				$(obj).find('i').html('&#xe601;');

				$(obj).parents("tr").find(".td-status").find('span')
						.removeClass('layui-btn-disabled').html('已启用');
				layer.msg('已启用!', {
					icon : 5,
					time : 1000
				});
			}

		});
	}

	/*用户-删除*/
	function member_del(goodsId) {
		layer.confirm('确认要删除吗？', {
			icon : 3,
			title : '提示信息'
		}, function(index) {
			//请求后端控制器删除数据
			$(obj).parents("tr").remove();
			layer.msg('已删除!', {
				icon : 1,
				time : 1000
			});
		});
	}

	function delAll(argument) {
		var ids = [];

		// 获取选中的id
		$('tbody input').each(function(index, el) {
			if ($(this).prop('checked')) {
				ids.push($(this).val())
			}
		});

		layer.confirm('确认要删除吗？' + ids.toString(), {
			icon : 3,
			title : '提示信息'
		}, function(index) {
			//捉到所有被选中的，发异步进行删除
			layer.msg('删除成功', {
				icon : 1
			});
			$(".layui-form-checked").not('.header').parents('tr').remove();
		});
	}
</script>
</html>